<template>

	<view class="container">
		<!-- 顶部切换标签 -->
		<view class="tabs">
			<view :class="['tab', activeTab === 'published' ? 'active' : '']" @click="switchTab('published')">
				已上架
			</view>
			<view :class="['tab', activeTab === 'unpublished' ? 'active' : '']" @click="switchTab('unpublished')">
				未上架
			</view>
		</view>

		<!-- 列表 -->
		<scroll-view class="list" scroll-y>
			<view class="item" v-for="(activity, index) in filteredActivities" :key="index">
				<view class="item-content" @click="goToDetails(activity)">
					<text class="title">{{ activity.title }}</text>
					<text :class="[
              'state',
              activity.state == 0 ? 'pending' : activity.state == 1 ? 'success' : 'fail'
            ]">
						<view v-if=" activity.state ===0">
							未上架
						</view>
						<view v-if=" activity.state ===1">
							已上架
						</view>
					</text>
				</view>
				<view class="item-time">{{ activity.createTime }}</view>
				<view class="item-actions">
					<!-- 判断按钮显示规则 -->
					<button v-if="activity.state == 0 " class="btn up" @click="handleAction('上架', activity)">
						上架
					</button>
					<button v-if="activity.state != 0" class="btn delete" @click="handleAction('下架', activity)">
						下架
					</button>
				</view>
			</view>
		</scroll-view>

		<!-- 底部发布按钮 -->
		<view class="publish-button" @click="handlePublish">
			+ 发布活动
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activityData: {
					pageSize: 10,
					pageNum: 1,
					shopId: 1,
				},
				activeTab: "unpublished", // 当前选中的标签
				activities: [],
			};
		},

		computed: {
			// 根据当前标签筛选活动
			filteredActivities() {
				if (this.activeTab === "published") {
					return this.activities.filter(
						(activity) => activity.state === 1
					);
				} else {
					return this.activities.filter(
						(activity) => activity.state !== 1
					);
				}
			}
		},
		onLoad(options) {
			this.getActity()
		},
		methods: {
			//获取活动列表
			getActity() {
				let that = this;
				this.$http({
					url: "/api/activity/activity/list",
					data: this.activityData,
					method: 'get',
					success(res) {
						that.activities = res.data.rows
						console.log(this.activities)
					},
					fail(err) {

					}
				})
			},


			onload() {
				this.getActivity()
			},
			

				
				


				// 切换标签
				switchTab(tab) {
					this.activeTab = tab;
				},
				// 处理上架、删除、下架等操作
				handleAction(action, activity) {
					if (action === "上架") {
						activity.state = 1,
							this.$http({
								url: 'api/activity/activity',
								data: activity,
								method: 'put',
								succsee(res) {
									if (res.data = 200) {
										uni.showToast({
											title: `已上架活动: ${activity.title}`,
											icon: "success",
										});
										this.getActity()
									} else {
										uni.showToast({
											title: `网络异常！`,
											icon: "error",
										});
									}
								},
								fail(err) {
									uni.showToast({
										title: `网络异常！`,
										icon: "error",
									});
								}
							})

					} else if (action === "下架") {
						uni.showModal({
							title: "确认操作",
							content: `确定要${action}活动 "${activity.title}" 吗？`,
							success: (res) => {
								activity.state = 0,
									this.$http({
										url: 'api/activity/activity',
										data: activity,
										method: 'put',
										succsee(res) {
											if (res.data = 200) {
												uni.showToast({
													title: `已${action}`,
													icon: "none",
												});
											} else {
												uni.showToast({
													title: `网络异常！`,
													icon: "error",
												});
											}
										},
										fail(err) {
											uni.showToast({
												title: `网络异常！`,
												icon: "error",
											});
										}
									})
							}
						})
					}
				},

				// 发布活动
				handlePublish() {
					uni.navigateTo({
						url: "/pages/lzx/business/publishEvent?shopId=" + this.activityData
							.shopId, // 修改为跳转的页面路径
					});
				},
				//活动详情
				goToDetails(activity) {
					// 使用 encodeURIComponent 编码传递数据
					const activityData = encodeURIComponent(JSON.stringify(activity));
					uni.navigateTo({
						url: `/pages/lzx/business/eventDetails?data=${activityData}`,
					});
				},
			
		},
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f8f8f8;
	}

	.tabs {
		display: flex;
		justify-content: space-around;
		background-color: #ffffff;
		padding: 10px 0;
		border-bottom: 1px solid #e5e5e5;
	}

	.tab {
		flex: 1;
		text-align: center;
		color: #999;
		font-size: 16px;
		padding: 10px 0;
	}

	.tab.active {
		color: #007aff;
		font-weight: bold;
		border-bottom: 2px solid #007aff;
	}

	.list {
		flex: 1;
		padding: 10px;
		background-color: #f8f8f8;
	}

	.item {
		background-color: #ffffff;
		border-radius: 8px;
		padding: 15px;
		margin-bottom: 10px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.item-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.title {
		font-size: 16px;
		font-weight: bold;
	}

	.state {
		font-size: 14px;
	}

	.state.pending {
		color: orange;
	}

	.state.success {
		color: green;
	}

	.state.fail {
		color: red;
	}

	.item-time {
		font-size: 12px;
		color: #999;
		margin-bottom: 10px;
	}

	.item-actions {
		display: flex;
		gap: 10px;
	}

	.btn {
		padding: 5px 15px;
		font-size: 14px;
		color: #ffffff;
		border-radius: 5px;
	}

	.btn.up {
		background-color: #007aff;
	}

	.btn.delete {
		background-color: #ff4d4d;
	}

	.publish-button {
		text-align: center;
		background-color: #007aff;
		color: #ffffff;
		padding: 15px 0;
		font-size: 18px;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
</style>